<template>
  <div id="app">
    <div class="wrap">
      <div class="container question-container">
        <transition-group enter-active-class='animated'>
          <div class="box box1 fadeInRight" v-if="cssanimate" :key="1">
            <div class="txt fadeIn" :key="4">
              <span>3<em>/3</em></span>
              <p>资深设计总监一般具备以下哪个特性？</p>
            </div>
            <img src="../../assets/question-bg.png" alt="">
          </div>
          <div class="box box2 fadeInLeft" v-if="cssanimate" :key="2">
            <img src="../../assets/question-3-bg.png" alt="">
          </div>
          <div class="box box3 fadeIn" v-if="cssanimate" :key="3">
            <img src="../../assets/question-3-people.png" alt="">
          </div>
        </transition-group>
      </div>

      <div class="container option-container" v-show="cssanimate">
        <div v-for="(option, index) in options" class="option animated fadeInLeft" :key="index" @click="choose($event, index)">
          <img src="../../assets/question-option.png" alt="">
          <span>{{option.txt}}</span>
        </div>
      </div>
    </div>
    <div class="dialog" v-show="show">
      <div class="mask"></div>
      <div class="dialog-container animated fadeInUpBig">
        <div class="dialog-box">
          <div class="imgbox">
          <img :src="resImg" alt="">
          </div>
          <h5>{{resTxt}}</h5>
          <p>必须是一身病啊！</p>
          <span class="btn" @click="next">前往活动详情</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import imgUrlErr from '../../assets/icon-err.png'
import imgUrlRight from '../../assets/icon-right.png'
export default {
  name: 'question3',
  components: {},
  data () {
    return {
      show: false,
      cssanimate: false,
      options: [
        {txt: "A.精通各种软件，有一大堆设计素材"},
        {txt: "B.指点江山，城市精英"},
        {txt: "C.鼠标手、颈椎病、黑眼圈"}
      ],
      res: 2,
      resImg:imgUrlErr,
      resTxt:'回答错误'
    }
  },
  mounted () {
    if (this.GLOBAL.loading) {
      this.$router.push('/')
    }
    this.cssanimate = true;
  },
  methods: {
    choose (event, ind) {
      // this.$alert();
      if (ind == this.res) {
        this.resImg = imgUrlRight;
        this.resTxt = '回答正确';
      }
      this.show = true;
    },
    next () {
      this.$router.push("/share");
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-weight: 600;
}
.container {
  position: relative;
}
.question-container {
  margin-top: 20px;
}
.option-container {
  margin-top: 20px;
  padding-bottom: 1rem;
  .option {
    width: 80%;
    margin: 0 auto;
    position: relative;
    margin-top: 20px;
	  animation-duration: .5s;
    img {
      width: 100%;
    }
    span {
      position: absolute;
      width: 100%;
      left: 5%;
      font-size: .378rem;
      color: #333;
      line-height: 5.5;
    }
  }
  .option1 {
	  animation-delay: .6s;
  }
  .option2 {
	  animation-delay: 1s;
  }
  .option3 {
	  animation-delay: 1.4s;
  }
}
.box1 {
  width: 80%;
  margin: 0 auto;
  position: relative;
	animation-duration: .5s;
  left: 2%;
  img {
    width: 100%;
  }
  .txt {
    position: absolute;
    padding: .45rem;
    display: flex;
    line-height: 1.5;
    color: #0d44ed;
    font-size: 0.45rem;
    span {
      margin-right: 10px;
      em {
        font-size: .15rem;
      }
    }
  }
}
.box2 {
  width: 80%;
  position: absolute;
	animation-duration: .5s;
  z-index: 2;
  left: 50%;
  margin-left: -42%;
  bottom: -5%;
  img {
    width: 100%;
  }
}
.box3 {
  width: 80%;
  position: absolute;
	animation-delay: .6s;
	animation-duration: .5s;
  z-index: 2;
  left: 50%;
  margin-left: -42%;
  bottom: -5%;
  img {
    width: 100%;
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba($color: #000000, $alpha: .5);
  z-index: 3;
}
.dialog-container {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  z-index: 4;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
	animation-duration: .5s;
  .dialog-box {
    min-width: 4rem;
    padding: .8rem .6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: .2rem;
    .imgbox {
      width: 2rem;
      img {
        width: 100%;
      }
    }
    h5{
      font-size: .4rem;
      font-weight: 600;
      color: #0d44ed;
      height: 1rem;
      line-height: 1rem;
      margin-top: .2rem;
    }
    p{
      height: .4rem;
      line-height: .4rem;
      font-size: .3rem;
      color: #333;
      font-weight: 600;
    }
    .btn{
      margin-top: .4rem;
      border-radius: 1rem;
      padding: .3rem .8rem;
      border: .1rem solid #0d44ed;
      font-size: .4rem;
      color: #333;
      background: #ffd400;
      font-weight: 600;
    }
  }
  
}
</style>
